/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    BlobInputList, CCell, Cell, Input, InputLine, LineColumn, RCell, Select, SuffixInput, Table, TableBody, TableRow, Text,
} from "customize-easy-ui-component";
import {CCellUnit, InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {usePrefixDataEdit, usePrefixDataTable} from "../../hook/usePrefixData";
import {检验结论GasC} from "../viewRes";

//检验结论报告 结论页概况
export const config设备概况 = [
    [['使用单位', '_$使用单位'],  ],
    [['单位地址', '_$使用单位地址'],  ],
    [['安全管理人员', '安全员'], ['联系电话', '安全员电'], ],
    [['邮政编码', '_$使用单位邮编'], ['压力管道代码','_$设备代码'],  ],
    //管道的台账里面:设备(装置)名称:   “管道设备名”，  “设备名称”
    [['管道名称', '_$管道设备名'],  ],
    //投用日期: 还是不用台账的。 还是：需报告自己录入。而且不是日期的。
    [['使用登记证编号', '_$使用证号'],  ['投用日期', {n:'投用日',t:'l',l:["见管道特性表"]}], ],
        //管道长度 也不用台账的。 实际检验的一部分？  【当前报告】录入。
    [[{pr:'性能参数', span:4, t:'管道长度'}, {n:'管道长',u:'m'}, ],  ['管道规格', {n:'管规格',t:'l',l:["见管道特性表"]}, ],  ],
    [[{t:'设计压力'}, {n:'设压力', u:'MPa',t:'l',l:["见管道特性表"]} ], ['设计温度',{n:'设计温', u:'℃',t:'l',l:["见管道特性表"]}],  ],
    [[{t:'设计介质'}, {n:'设介质',t:'l',l:["见管道特性表"]} ], ['管道材质', {n:'管材质',t:'l',l:["见管道特性表"]}] ],
    [[{t:'操作压力'}, {n:'操压力', u:'MPa',t:'l',l:["见管道特性表"]} ], ['操作温度',{n:'操温度', u:'℃',t:'l',l:["见管道特性表"]}]  ],
];

interface ConclusionSurveyProps extends InternalItemProps {
    config?: any[];
}
//可兼容俩种模式的配置；
export const ConclusionSurvey=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,config}:ConclusionSurveyProps,  ref
    ) => {
        const {inp, setInp} = useItemInputControl({ref});
        const [renderEditor, itemA概况] = usePrefixDataEdit({
            inp, setInp, config: config??config设备概况,  });
        const [getInpFilter] = useMeasureInpFilter(null, itemA概况, );
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            设备概况除在台账业务信息中可修改外还需修改的部分:
            {renderEditor}
            { children }
        </InspectRecordLayout>;
});

interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
    /**不需要加 备注字段的*/
    nmemo?:boolean;
}
export const itemA下结论=['检验结论','检验日期','检验日期1','新下检日','结论说明','参检人员','问处结果','许压力','许温度','许介质','许其它'];
/**通用见证材料3项的： 约定：children [] 可以嵌入俩个儿子DOM节点，分别代表两个段落插入一个div块;
 * 【特殊的】"result":"允许使用,降压使用,进行合于使用评价,停止使用",
 * */
export const ConclusionPlas=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:Props,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA下结论,);
        const {inp, setInp} = useItemInputControl({ ref });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            问题与处理:
            <BlobInputList  value={inp?.问处结果 ||''} rows={7}
                            onListChange={v => setInp({ ...inp, 问处结果: v || undefined}) } />
            许用参数（报废依据）:
            <LineColumn>
                <InputLine label={`压力：`}>
                    <SuffixInput  value={inp?.许压力 ||''}  onSave={txt=> setInp( { ...inp, 许压力: Number(txt) || undefined})}
                            >MPa</SuffixInput>
                </InputLine>
                <InputLine label={`温度：`}>
                    <SuffixInput  value={inp?.许温度 ||''}  onSave={txt=> setInp( { ...inp, 许温度: Number(txt) || undefined})}
                            >℃</SuffixInput>
                </InputLine>
                <InputLine  label='介质：' >
                    <Input  value={inp?.许介质 ||''}
                            onChange={e => setInp({ ...inp, 许介质: e.currentTarget.value}) } />
                </InputLine>
                <InputLine  label='其它：' >
                    <Input  value={inp?.许其它 ||''}
                            onChange={e => setInp({ ...inp, 许其它: e.currentTarget.value}) } />
                </InputLine>
            </LineColumn>
            <InputLine label='参检人员：'>
                <BlobInputList value={inp?.参检人员 || ''} rows={2}
                               onListChange={v => setInp({...inp, 参检人员: v || undefined}) } />
            </InputLine>
            <Text variant="h5">检验结论-检查结论{'>>'}</Text>
            <InputLine  label='检验结论' >
                <Select inputSize="md" css={{minWidth: '140px', fontSize: '1.3rem', padding: '0 1rem'}}
                        value={inp?.检验结论 || ''}
                        onChange={e => setInp({...inp, 检验结论: e.currentTarget.value || undefined})}>
                    <option></option>
                    <option>允许使用</option>
                    <option>降压使用</option>
                    <option>进行合于使用评价</option>
                    <option>停止使用</option>
                </Select>
            </InputLine>
            <LineColumn>
                <InputLine label='设置检验日期'>
                    <Input value={inp?.检验日期 || ''} type='date'
                           onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
                </InputLine>
                <InputLine  label='检验起始日期' >
                    <Input  value={inp?.检验日期1 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 检验日期1: e.currentTarget.value}) } />
                </InputLine>
                <InputLine  label='下次全面检验日期' >
                    <Input  value={inp?.新下检日 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
                </InputLine>
            </LineColumn>
        </InspectRecordLayout>;
 });

// const config结论概况上 = config结论概况.slice(0, 14); const config结论概况下 = config结论概况.slice(14);
//整个结论报告页
export const 检验结论报告 = ({orc, rep, theme}: { orc: any, rep: any, theme: any }
) => {
    const renderUpper = usePrefixDataTable({config: config设备概况, orc, rep, slash: true});
    //const renderMiddle = usePrefixDataTable({config: config结论概况下, orc, rep, slash: true, embed: {0: <CCell rowSpan={8}>性能参数</CCell>,},});
    return <>
        <Text id={'Conclusion'} variant="h2" css={{
            textAlign: 'center',
            "@media print": {pageBreakBefore: 'always',},
        }}>公用管道全面检验结论报告</Text>
        <Text css={{
            display: 'flex', flexDirection: 'row-reverse', marginRight: '2rem'
        }}>报告编号：{rep.isp?.no}</Text>
        <Table fixed={ ["4%","11%", "34%", "5%", "8%", "%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Survey'}>
                    {renderUpper}
                </RepLink>
            </TableBody>
        </Table>
        <Table fixed={ ["8.5%","36%", "8.5%", "6.5%", "%"] } css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Conclusion'}>
                    <TableRow>
                        <CCell>主要依据</CCell><CCell colSpan={4}>TSG D7004-2010《压力管道定期检验规则——公用管道》</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>问题与处理</CCell>
                        <Cell colSpan={4} css={{whiteSpace:'pre-wrap'}}>
                           {orc.问处结果 ?? '／'}
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <CCell rowSpan={4}>检验结论</CCell><CCell rowSpan={4}><Text variant="h1" css={{fontSize:'1.8rem'}}>{orc.检验结论}</Text></CCell>
                        <CCell rowSpan={4}>许用参数（报废依据）</CCell><CCell>压力：</CCell><CCellUnit unit='MPa'>{orc.许压力 ?? '／'}</CCellUnit>
                    </TableRow>
                    <TableRow><CCell>温度：</CCell><CCellUnit unit='℃'>{orc.许温度 ?? '／'}</CCellUnit></TableRow>
                    <TableRow><CCell>介质：</CCell><CCell>{orc.许介质 ?? '／'}</CCell></TableRow>
                    <TableRow><CCell>其它：</CCell><CCell>{orc.许其它 ?? '／'}</CCell></TableRow>
                    <TableRow>
                        <RCell colSpan={2}> 下次全面检验日期：</RCell>
                        <CCell colSpan={3}>{orc.新下检日 ?? '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检验人员</CCell>
                        <CCell colSpan={4}>{orc.参检人员}</CCell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        {检验结论GasC({theme, orc, rep})}
        <Text css={{fontSize:'0.7rem'}}>
            注：本报告适用于GB1-IV级次高压燃气管道，GB1-V级和GB1-VI级中压燃气管道。
        </Text>
    </>;
};
